<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq遍历</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
    .ancestors * {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }

    .descendants * {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }

    .pr * {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>

<body>
    <div class="ancestors">
        <div style="width:500px;">div (曾祖父元素)
            <ul>ul (祖父元素)
                <li>li (父元素)
                    <span>span</span>
                </li>
            </ul>
        </div>

        <div style="width:500px;">div (祖父元素)
            <p>p (父元素)
                <span>span</span>
            </p>
        </div>
    </div>
    <hr>
    <div class="descendants" style="width:500px;">div (当前元素)
        <p>p (儿子元素)
            <span>span (孙子元素)</span>
        </p>
        <p class="son">p (儿子元素)
            <span>span (孙子元素)</span>
        </p>
    </div>
    <hr>
    <div id="fi">
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
    </div>
    <hr>
    <div class="pr">div (父元素)
        <p id="pp">p</p>
        <span>span</span>
        <h2 id="h2">h2</h2>
        <h3 id="h3">h3</h3>
        <p>p</p>
      </div>
</body>
<script>
    $(function () {
        // $().parent:返回被选元素的直接父元素
        $("span").parent().css("background-color", 'orange')
        // $().parents:返回被选与元素的所有祖先元素,一路向上找直到html根元素
        // $("li").parents("ul").css("fontSize","50px")
        // $().parentsUntil:返回介于两个给定元素之间的所有祖先元素
        $("span").parentsUntil('div').css('color', 'red')

        // $().children():返回直接所有的子元素;$().children("p.son"):找到所有类名为son的p标签
        $(".descendants").children().css("background-color", '#bfa')
        $(".descendants").children("p.son").css("background-color", 'blue')

        // $().find():返回被选元素的后代元素，一路向下直到最后一个后代;$().find("*")返回所有的后代元素
        // $("#fi").find("h3").css("color","red")
        $("#fi").find("*").css("color", "red")
        // siblings():返回所有的兄弟元素
        $("#h2").siblings().css({
            "color": "red",
            "border": "2px solid red"
        })

        $("#h2").siblings().css({
            "color": "red",
            "border": "2px solid red"
        })
        // next():返回被选元素的下一个同胞元素
        $("#h2").next().css("fontSize","30px")

        // nextAll():返回被选元素的所有兄弟元素
        $("#h2").nextAll().css("color","black")

        $("#pp").nextUntil("#h3").css("color","gray")

    })
</script>

</html>